'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { 
  Server, 
  Database, 
  HardDrive, 
  Wifi,
  CheckCircle,
  AlertCircle,
  XCircle
} from 'lucide-react'

const systemServices = [
  {
    name: 'Web 服务器',
    status: 'running' as const,
    icon: Server,
    description: 'Nginx 1.24.0',
    uptime: '15天 8小时 32分钟'
  },
  {
    name: '数据库服务',
    status: 'running' as const,
    icon: Database,
    description: 'PostgreSQL 15.4',
    uptime: '15天 8小时 32分钟'
  },
  {
    name: '缓存服务',
    status: 'running' as const,
    icon: HardDrive,
    description: 'Redis 7.2',
    uptime: '15天 8小时 32分钟'
  },
  {
    name: '文件存储',
    status: 'warning' as const,
    icon: HardDrive,
    description: '磁盘使用率 85%',
    uptime: '15天 8小时 32分钟'
  },
  {
    name: '网络连接',
    status: 'running' as const,
    icon: Wifi,
    description: '延迟 12ms',
    uptime: '15天 8小时 32分钟'
  }
]

const getStatusIcon = (status: 'running' | 'warning' | 'error') => {
  switch (status) {
    case 'running':
      return <CheckCircle className="h-4 w-4 text-green-500" />
    case 'warning':
      return <AlertCircle className="h-4 w-4 text-yellow-500" />
    case 'error':
      return <XCircle className="h-4 w-4 text-red-500" />
  }
}

const getStatusBadge = (status: 'running' | 'warning' | 'error') => {
  switch (status) {
    case 'running':
      return <Badge variant="default" className="bg-green-100 text-green-800">运行中</Badge>
    case 'warning':
      return <Badge variant="secondary" className="bg-yellow-100 text-yellow-800">警告</Badge>
    case 'error':
      return <Badge variant="destructive">错误</Badge>
  }
}

export function SystemStatus() {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center space-x-2">
          <Server className="h-5 w-5" />
          <span>系统状态</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {systemServices.map((service) => (
            <div key={service.name} className="flex items-center justify-between p-3 border rounded-lg">
              <div className="flex items-center space-x-3">
                <service.icon className="h-5 w-5 text-muted-foreground" />
                <div>
                  <div className="font-medium">{service.name}</div>
                  <div className="text-sm text-muted-foreground">{service.description}</div>
                </div>
              </div>
              <div className="flex items-center space-x-3">
                {getStatusIcon(service.status)}
                {getStatusBadge(service.status)}
                <div className="text-xs text-muted-foreground text-right">
                  <div>运行时间</div>
                  <div>{service.uptime}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        
        {/* 系统资源使用 */}
        <div className="mt-6 pt-4 border-t">
          <h4 className="font-medium mb-3">资源使用情况</h4>
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span>CPU 使用率</span>
                <span>23%</span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-2">
                <div className="bg-blue-600 h-2 rounded-full" style={{ width: '23%' }}></div>
              </div>
            </div>
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span>内存使用率</span>
                <span>67%</span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-2">
                <div className="bg-green-600 h-2 rounded-full" style={{ width: '67%' }}></div>
              </div>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
